<?php
// 模拟数据 - 游戏与软件合集
$sectionData = [
    'section_id' => 'game-list',
    'section_pretitle' => '精选产品',
    'section_title' => '游戏与软件合集',
    'section_subtitle' => '浏览我们的热门游戏和实用软件，找到适合您的选择',
    'layout' => 'grid', // 可选: grid, list
    'columns' => '3', // 1-4
    'filter' => 'category', // 可选: category, rating, price
    'bg_color' => 'white', // 可选: white, gray, light
    'card_style' => 'modern', // 可选: modern, classic, minimal
    'hover_effect' => 'scale', // 可选: scale, lift, shadow, none
    'show_filter' => true,
    'show_pagination' => true,
    'items_per_page' => 9,
    'items' => [
        [
            'id' => 101,
            'title' => '星际探险家：未知边界',
            'subtitle' => '开启一段跨越星系的冒险之旅',
            'category' => 'game',
            'tags' => ['科幻', '冒险', '探索', '建造'],
            'release_date' => '2023-10-15',
            'developer' => '银河游戏工作室',
            'publisher' => '星际娱乐',
            'price' => '¥198',
            'discount' => '10%',
            'discounted_price' => '¥178',
            'rating' => 4.8,
            'rating_count' => 2356,
            'image' => 'https://picsum.photos/seed/gamestar1/800/600',
            'url' => '/game?id=101'
        ],
        [
            'id' => 102,
            'title' => '魔法王国：元素觉醒',
            'subtitle' => '掌握元素之力，拯救魔法王国',
            'category' => 'game',
            'tags' => ['奇幻', 'RPG', '策略', '冒险'],
            'release_date' => '2023-08-22',
            'developer' => '奇幻工作室',
            'publisher' => '梦幻游戏',
            'price' => '¥158',
            'discount' => '15%',
            'discounted_price' => '¥134',
            'rating' => 4.6,
            'rating_count' => 1890,
            'image' => 'https://picsum.photos/seed/magic1/800/600',
            'url' => '/game?id=102'
        ],
        [
            'id' => 103,
            'title' => '城市建造大师',
            'subtitle' => '从一个小镇开始，建造您的梦想之城',
            'category' => 'game',
            'tags' => ['模拟', '建造', '管理', '策略'],
            'release_date' => '2023-09-10',
            'developer' => '城市游戏',
            'publisher' => '策略游戏发行',
            'price' => '¥128',
            'discount' => '0%',
            'discounted_price' => '¥128',
            'rating' => 4.5,
            'rating_count' => 1560,
            'image' => 'https://picsum.photos/seed/city1/800/600',
            'url' => '/game?id=103'
        ],
        [
            'id' => 201,
            'title' => '数据可视化工具',
            'subtitle' => '简单直观地创建专业图表和可视化效果',
            'category' => 'software',
            'tags' => ['工具', '数据', '图表', '办公'],
            'release_date' => '2023-07-15',
            'developer' => '科技工具工作室',
            'publisher' => '生产力软件',
            'price' => '¥98',
            'discount' => '20%',
            'discounted_price' => '¥78',
            'rating' => 4.7,
            'rating_count' => 980,
            'image' => 'https://picsum.photos/seed/data1/800/600',
            'url' => '/?s=software&id=201'
        ],
        [
            'id' => 202,
            'title' => '创意设计套件',
            'subtitle' => '一站式图形设计解决方案，适合各种创意需求',
            'category' => 'software',
            'tags' => ['设计', '图形', '创意', '专业'],
            'release_date' => '2023-06-30',
            'developer' => '创意软件公司',
            'publisher' => '设计科技',
            'price' => '¥198',
            'discount' => '10%',
            'discounted_price' => '¥178',
            'rating' => 4.9,
            'rating_count' => 1250,
            'image' => 'https://picsum.photos/seed/design1/800/600',
            'url' => '/?s=software&id=202'
        ],
        [
            'id' => 203,
            'title' => '音频编辑器',
            'subtitle' => '专业级音频处理工具，让您的声音更出色',
            'category' => 'software',
            'tags' => ['音频', '编辑', '音乐', '工具'],
            'release_date' => '2023-05-20',
            'developer' => '音频科技',
            'publisher' => '音乐软件',
            'price' => '¥148',
            'discount' => '5%',
            'discounted_price' => '¥141',
            'rating' => 4.6,
            'rating_count' => 870,
            'image' => 'https://picsum.photos/seed/audio1/800/600',
            'url' => '/?s=software&id=203'
        ],
        [
            'id' => 104,
            'title' => '赛车传奇：极速挑战',
            'subtitle' => '体验极限速度，成为赛道传奇',
            'category' => 'game',
            'tags' => ['赛车', '竞速', '体育', '多人'],
            'release_date' => '2023-04-18',
            'developer' => '速度游戏',
            'publisher' => '竞技游戏',
            'price' => '¥168',
            'discount' => '25%',
            'discounted_price' => '¥126',
            'rating' => 4.4,
            'rating_count' => 1120,
            'image' => 'https://picsum.photos/seed/racing1/800/600',
            'url' => '/game?id=104'
        ],
        [
            'id' => 105,
            'title' => '恐怖迷城：暗影之下',
            'subtitle' => '在恐怖迷城中寻找真相，逃离暗影的追击',
            'category' => 'game',
            'tags' => ['恐怖', '解谜', '冒险', '惊悚'],
            'release_date' => '2023-03-05',
            'developer' => '恐惧工作室',
            'publisher' => '惊悚游戏',
            'price' => '¥128',
            'discount' => '0%',
            'discounted_price' => '¥128',
            'rating' => 4.3,
            'rating_count' => 950,
            'image' => 'https://picsum.photos/seed/horror1/800/600',
            'url' => '/game?id=105'
        ],
        [
            'id' => 204,
            'title' => '项目管理助手',
            'subtitle' => '高效管理团队项目，提升工作效率',
            'category' => 'software',
            'tags' => ['工具', '办公', '团队', '管理'],
            'release_date' => '2023-02-14',
            'developer' => '效率软件',
            'publisher' => '生产力科技',
            'price' => '¥158',
            'discount' => '15%',
            'discounted_price' => '¥134',
            'rating' => 4.7,
            'rating_count' => 1320,
            'image' => 'https://picsum.photos/seed/project1/800/600',
            'url' => '/?s=software&id=204'
        ]
    ]
];

// 获取当前页面参数，用于分页和筛选
$currentPage = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$currentFilter = isset($_GET['filter']) ? $_GET['filter'] : $sectionData['filter'];
$currentCategory = isset($_GET['category']) ? $_GET['category'] : 'all';

// 根据筛选条件过滤项目
$filteredItems = $sectionData['items'];

// 按分类筛选
if ($currentCategory !== 'all') {
    $filteredItems = array_filter($filteredItems, function($item) use ($currentCategory) {
        return $item['category'] === $currentCategory;
    });
}

// 按条件排序
switch ($currentFilter) {
    case 'rating':
        usort($filteredItems, function($a, $b) {
            return $b['rating'] - $a['rating'];
        });
        break;
    case 'price':
        usort($filteredItems, function($a, $b) {
            return floatval(str_replace('¥', '', $a['discounted_price'])) - floatval(str_replace('¥', '', $b['discounted_price']));
        });
        break;
    case 'newest':
        usort($filteredItems, function($a, $b) {
            return strtotime($b['release_date']) - strtotime($a['release_date']);
        });
        break;
    // 默认按分类（不排序）
}

// 分页处理
$totalItems = count($filteredItems);
$totalPages = ceil($totalItems / $sectionData['items_per_page']);
$currentItems = array_slice(
    $filteredItems, 
    ($currentPage - 1) * $sectionData['items_per_page'], 
    $sectionData['items_per_page']
);

// 根据参数获取CSS类
function getLayoutClasses($layout, $columns) {
    if ($layout === 'list') {
        return 'grid grid-cols-1 gap-6';
    }
    
    // 网格布局根据列数返回不同的响应式类
    $columnClasses = [
        '1' => 'grid-cols-1',
        '2' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2',
        '3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
        '4' => 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
    ];
    
    return 'grid ' . ($columnClasses[$columns] ?? $columnClasses['3']) . ' gap-6';
}

function getBackgroundClass($bgColor) {
    $classes = [
        'white' => 'bg-white',
        'gray' => 'bg-gray-100',
        'light' => 'bg-gray-50'
    ];
    return $classes[$bgColor] ?? $classes['white'];
}

function getCardStyleClasses($style, $hoverEffect) {
    $baseClasses = 'overflow-hidden rounded-lg transition-all duration-300';
    
    // 卡片样式
    switch ($style) {
        case 'classic':
            $baseClasses .= ' bg-white border border-gray-200';
            break;
        case 'minimal':
            $baseClasses .= ' bg-white shadow-sm';
            break;
        case 'modern':
        default:
            $baseClasses .= ' bg-white shadow-md';
            break;
    }
    
    // 悬停效果
    switch ($hoverEffect) {
        case 'scale':
            $baseClasses .= ' hover:scale-[1.02]';
            break;
        case 'lift':
            $baseClasses .= ' hover:-translate-y-1 hover:shadow-lg';
            break;
        case 'shadow':
            $baseClasses .= ' hover:shadow-xl';
            break;
        case 'none':
        default:
            break;
    }
    
    return $baseClasses;
}

// 生成星级评分HTML
function renderRating($rating) {
    $html = '<div class="flex items-center">';
    $fullStars = floor($rating);
    $halfStar = $rating % 1 >= 0.5;
    
    // 满星
    for ($i = 0; $i < $fullStars; $i++) {
        $html .= '<i class="fa fa-star text-yellow-400"></i>';
    }
    
    // 半星
    if ($halfStar) {
        $html .= '<i class="fa fa-star-half-o text-yellow-400"></i>';
    }
    
    // 空星
    $emptyStars = 5 - $fullStars - ($halfStar ? 1 : 0);
    for ($i = 0; $i < $emptyStars; $i++) {
        $html .= '<i class="fa fa-star-o text-yellow-400"></i>';
    }
    
    $html .= '</div>';
    return $html;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $sectionData['section_title']; ?></title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        game: '#7B61FF',
                        software: '#00B42A'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .card-list-item {
                display: flex;
                flex-direction: row;
                gap: 4;
            }
        }
    </style>
</head>
<body class="font-inter text-gray-800 bg-gray-50">
    <!-- 页面头部 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-gamepad text-white text-xl"></i>
                </div>
                <span class="text-xl font-bold">GameSoft Hub</span>
            </div>
            
            <nav class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-primary font-medium">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">游戏</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">软件</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">排行榜</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于我们</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <button class="p-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                    <i class="fa fa-search"></i>
                </button>
                <button class="md:hidden p-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                    <i class="fa fa-bars"></i>
                </button>
                <button class="hidden md:block px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    登录
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 列表区块 -->
        <section id="<?php echo $sectionData['section_id']; ?>" class="<?php echo getBackgroundClass($sectionData['bg_color']); ?> rounded-xl p-6 md:p-10 my-8">
            <!-- 区块标题 -->
            <div class="text-center mb-8 md:mb-12">
                <?php if (!empty($sectionData['section_pretitle'])): ?>
                    <p class="text-primary font-medium mb-2">
                        <?php echo $sectionData['section_pretitle']; ?>
                    </p>
                <?php endif; ?>
                
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">
                    <?php echo $sectionData['section_title']; ?>
                </h2>
                
                <?php if (!empty($sectionData['section_subtitle'])): ?>
                    <p class="text-gray-600 max-w-2xl mx-auto">
                        <?php echo $sectionData['section_subtitle']; ?>
                    </p>
                <?php endif; ?>
            </div>
            
            <!-- 筛选工具栏 -->
            <?php if ($sectionData['show_filter']): ?>
                <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <!-- 布局切换 -->
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-600">视图:</span>
                            <div class="flex border border-gray-200 rounded-md overflow-hidden">
                                <a href="?layout=grid&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=<?php echo $currentCategory; ?>" 
                                   class="px-3 py-1.5 <?php echo $sectionData['layout'] === 'grid' ? 'bg-primary text-white' : 'bg-white text-gray-600 hover:bg-gray-50'; ?> transition-colors">
                                    <i class="fa fa-th-large"></i>
                                </a>
                                <a href="?layout=list&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=<?php echo $currentCategory; ?>" 
                                   class="px-3 py-1.5 <?php echo $sectionData['layout'] === 'list' ? 'bg-primary text-white' : 'bg-white text-gray-600 hover:bg-gray-50'; ?> transition-colors">
                                    <i class="fa fa-list"></i>
                                </a>
                            </div>
                        </div>
                        
                        <!-- 分类筛选 -->
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="text-gray-600">分类:</span>
                            <a href="?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=all" 
                               class="px-3 py-1.5 rounded-md text-sm <?php echo $currentCategory === 'all' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'; ?> transition-colors">
                                全部
                            </a>
                            <a href="?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=game" 
                               class="px-3 py-1.5 rounded-md text-sm <?php echo $currentCategory === 'game' ? 'bg-game text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'; ?> transition-colors">
                                游戏
                            </a>
                            <a href="?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=software" 
                               class="px-3 py-1.5 rounded-md text-sm <?php echo $currentCategory === 'software' ? 'bg-software text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'; ?> transition-colors">
                                软件
                            </a>
                        </div>
                        
                        <!-- 排序筛选 -->
                        <div>
                            <select onchange="window.location.href='?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter='+this.value+'&category=<?php echo $currentCategory; ?>'"
                                    class="bg-gray-100 border border-gray-200 text-gray-700 py-2 pl-3 pr-8 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="category" <?php echo $currentFilter === 'category' ? 'selected' : ''; ?>>默认排序</option>
                                <option value="rating" <?php echo $currentFilter === 'rating' ? 'selected' : ''; ?>>按评分排序</option>
                                <option value="price" <?php echo $currentFilter === 'price' ? 'selected' : ''; ?>>按价格排序</option>
                                <option value="newest" <?php echo $currentFilter === 'newest' ? 'selected' : ''; ?>>最新发布</option>
                            </select>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
            
            <!-- 内容列表 -->
            <div class="<?php echo getLayoutClasses($sectionData['layout'], $sectionData['columns']); ?>">
                <?php if (!empty($currentItems)): ?>
                    <?php foreach ($currentItems as $item): ?>
                        <div class="<?php echo getCardStyleClasses($sectionData['card_style'], $sectionData['hover_effect']); ?>">
                            <a href="<?php echo $item['url']; ?>">
                                <!-- 列表视图 -->
                                <?php if ($sectionData['layout'] === 'list'): ?>
                                    <div class="flex flex-col sm:flex-row h-full">
                                        <!-- 图片 -->
                                        <div class="sm:w-1/3 relative">
                                            <img src="<?php echo $item['image']; ?>" 
                                                 alt="<?php echo $item['title']; ?>" 
                                                 class="w-full h-48 sm:h-full object-cover">
                                            <?php if ($item['discount'] && $item['discount'] !== '0%'): ?>
                                                <div class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
                                                    <?php echo $item['discount']; ?>
                                                </div>
                                            <?php endif; ?>
                                            <div class="absolute top-3 right-3 px-2 py-1 rounded text-xs font-medium <?php echo $item['category'] === 'game' ? 'bg-game/90 text-white' : 'bg-software/90 text-white'; ?>">
                                                <?php echo $item['category'] === 'game' ? '游戏' : '软件'; ?>
                                            </div>
                                        </div>
                                        
                                        <!-- 内容 -->
                                        <div class="sm:w-2/3 p-4 flex flex-col">
                                            <h3 class="text-lg font-semibold mb-1 hover:text-primary transition-colors">
                                                <?php echo $item['title']; ?>
                                            </h3>
                                            <p class="text-gray-600 text-sm mb-3 line-clamp-2">
                                                <?php echo $item['subtitle']; ?>
                                            </p>
                                            
                                            <div class="flex flex-wrap gap-2 mb-3">
                                                <?php foreach ($item['tags'] as $tag): ?>
                                                    <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded">
                                                        <?php echo $tag; ?>
                                                    </span>
                                                <?php endforeach; ?>
                                            </div>
                                            
                                            <div class="flex items-center text-sm text-gray-500 mb-3">
                                                <span class="mr-4"><i class="fa fa-calendar-o mr-1"></i> <?php echo $item['release_date']; ?></span>
                                                <span><i class="fa fa-user-o mr-1"></i> <?php echo $item['developer']; ?></span>
                                            </div>
                                            
                                            <div class="mt-auto flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <?php echo renderRating($item['rating']); ?>
                                                    <span class="ml-2 text-sm text-gray-600">
                                                        (<?php echo $item['rating_count']; ?>)
                                                    </span>
                                                </div>
                                                
                                                <div class="text-right">
                                                    <?php if ($item['discount'] && $item['discount'] !== '0%'): ?>
                                                        <span class="text-lg font-bold text-red-500">
                                                            <?php echo $item['discounted_price']; ?>
                                                        </span>
                                                        <span class="text-gray-400 text-sm line-through ml-2">
                                                            <?php echo $item['price']; ?>
                                                        </span>
                                                    <?php else: ?>
                                                        <span class="text-lg font-bold text-gray-800">
                                                            <?php echo $item['price']; ?>
                                                        </span>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php else: ?>
                                    <!-- 网格视图 -->
                                    <div class="flex flex-col h-full">
                                        <!-- 图片 -->
                                        <div class="relative">
                                            <img src="<?php echo $item['image']; ?>" 
                                                 alt="<?php echo $item['title']; ?>" 
                                                 class="w-full h-48 object-cover">
                                            <?php if ($item['discount'] && $item['discount'] !== '0%'): ?>
                                                <div class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
                                                    <?php echo $item['discount']; ?>
                                                </div>
                                            <?php endif; ?>
                                            <div class="absolute top-3 right-3 px-2 py-1 rounded text-xs font-medium <?php echo $item['category'] === 'game' ? 'bg-game/90 text-white' : 'bg-software/90 text-white'; ?>">
                                                <?php echo $item['category'] === 'game' ? '游戏' : '软件'; ?>
                                            </div>
                                        </div>
                                        
                                        <!-- 内容 -->
                                        <div class="p-4 flex flex-col flex-grow">
                                            <h3 class="text-lg font-semibold mb-1 hover:text-primary transition-colors line-clamp-1">
                                                <?php echo $item['title']; ?>
                                            </h3>
                                            <p class="text-gray-600 text-sm mb-3 line-clamp-2">
                                                <?php echo $item['subtitle']; ?>
                                            </p>
                                            
                                            <div class="flex flex-wrap gap-2 mb-3">
                                                <?php $showTags = count($item['tags']) > 0 ? array_slice($item['tags'], 0, 2) : []; ?>
                                                <?php foreach ($showTags as $tag): ?>
                                                    <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded">
                                                        <?php echo $tag; ?>
                                                    </span>
                                                <?php endforeach; ?>
                                                <?php if (count($item['tags']) > 2): ?>
                                                    <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded">
                                                        +<?php echo count($item['tags']) - 2; ?>
                                                    </span>
                                                <?php endif; ?>
                                            </div>
                                            
                                            <div class="mt-auto">
                                                <div class="flex items-center justify-between mb-2">
                                                    <div class="flex items-center">
                                                        <?php echo renderRating($item['rating']); ?>
                                                    </div>
                                                    <span class="text-sm text-gray-500">
                                                        <?php echo $item['rating_count']; ?> 评价
                                                    </span>
                                                </div>
                                                
                                                <div class="flex items-center justify-between">
                                                    <?php if ($item['discount'] && $item['discount'] !== '0%'): ?>
                                                        <span class="text-lg font-bold text-red-500">
                                                            <?php echo $item['discounted_price']; ?>
                                                        </span>
                                                        <span class="text-gray-400 text-sm line-through">
                                                            <?php echo $item['price']; ?>
                                                        </span>
                                                    <?php else: ?>
                                                        <span class="text-lg font-bold text-gray-800">
                                                            <?php echo $item['price']; ?>
                                                        </span>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </a>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <!-- 无结果提示 -->
                    <div class="col-span-full text-center py-16">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                            <i class="fa fa-search text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium mb-2">未找到匹配的内容</h3>
                        <p class="text-gray-500 max-w-md mx-auto">尝试更改筛选条件或浏览其他分类</p>
                        <a href="?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter=category&category=all" 
                           class="inline-block mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看全部内容
                        </a>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- 分页 -->
            <?php if ($sectionData['show_pagination'] && $totalPages > 1): ?>
                <div class="mt-10 flex justify-center">
                    <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                        <?php if ($currentPage > 1): ?>
                            <a href="?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=<?php echo $currentCategory; ?>&page=<?php echo $currentPage - 1; ?>" 
                               class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <i class="fa fa-chevron-left text-xs"></i>
                            </a>
                        <?php else: ?>
                            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-400 cursor-not-allowed">
                                <i class="fa fa-chevron-left text-xs"></i>
                            </span>
                        <?php endif; ?>
                        
                        <?php 
                        // 显示的页码范围
                        $startPage = max(1, $currentPage - 2);
                        $endPage = min($totalPages, $currentPage + 2);
                        
                        // 始终显示第一页
                        if ($startPage > 1) {
                            echo '<a href="?layout='.$sectionData['layout'].'&columns='.$sectionData['columns'].'&filter='.$currentFilter.'&category='.$currentCategory.'&page=1" 
                                      class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>';
                            
                            if ($startPage > 2) {
                                echo '<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>';
                            }
                        }
                        
                        // 显示中间页码
                        for ($i = $startPage; $i <= $endPage; $i++) {
                            if ($i == $currentPage) {
                                echo '<span class="relative inline-flex items-center px-4 py-2 border border-primary bg-primary text-sm font-medium text-white">'.$i.'</span>';
                            } else {
                                echo '<a href="?layout='.$sectionData['layout'].'&columns='.$sectionData['columns'].'&filter='.$currentFilter.'&category='.$currentCategory.'&page='.$i.'" 
                                          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">'.$i.'</a>';
                            }
                        }
                        
                        // 始终显示最后一页
                        if ($endPage < $totalPages) {
                            if ($endPage < $totalPages - 1) {
                                echo '<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>';
                            }
                            
                            echo '<a href="?layout='.$sectionData['layout'].'&columns='.$sectionData['columns'].'&filter='.$currentFilter.'&category='.$currentCategory.'&page='.$totalPages.'" 
                                      class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">'.$totalPages.'</a>';
                        }
                        ?>
                        
                        <?php if ($currentPage < $totalPages): ?>
                            <a href="?layout=<?php echo $sectionData['layout']; ?>&columns=<?php echo $sectionData['columns']; ?>&filter=<?php echo $currentFilter; ?>&category=<?php echo $currentCategory; ?>&page=<?php echo $currentPage + 1; ?>" 
                               class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <i class="fa fa-chevron-right text-xs"></i>
                            </a>
                        <?php else: ?>
                            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-400 cursor-not-allowed">
                                <i class="fa fa-chevron-right text-xs"></i>
                            </span>
                        <?php endif; ?>
                    </nav>
                </div>
            <?php endif; ?>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-300 mt-16">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                            <i class="fa fa-gamepad text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-white">GameSoft Hub</span>
                    </div>
                    <p class="text-gray-400 mb-4">您的一站式游戏和软件资源平台，提供最新、最优质的数字产品。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">游戏库</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">软件中心</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">最新上架</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-white font-medium mb-4">支持</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">退款政策</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">用户协议</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-white font-medium mb-4">订阅更新</h3>
                    <p class="text-gray-400 mb-4">获取最新游戏和软件的更新通知</p>
                    <form class="flex">
                        <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
                        <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2023 GameSoft Hub. 保留所有权利。</p>
            </div>
        </div>
    </footer>
</body>
</html>
    